;(function () {
    <!--头部导航区域-->
    const template = ` 
 <div>
    <app-navbar></app-navbar>

    <!--核心区域:分左右两边-->
    <div class="container-fluid">
        <div class="row">

            <!--左边菜单栏区域 , 在该菜单里面配置了router-like 的路径跳转，所以下面需要配置路由的出口，router-view -->
            <app-leaf></app-leaf>

<!--            <app-home>-->
<!--                &lt;!&ndash; 在 进行定义的时候，要在对应的组件中使用，要是定义到别的组件中，是不会生效的 &ndash;&gt;-->
<!--             <h1 slot="dashboard"" class="page-header">{{title}}</h1>-->
<!--            </app-home>-->

                <!--   keep-alive 表示，当前显示的内容进行缓存，在进行来回切换组件，实现输入框内容不会被清空 -->
                <keep-alive>
                  <!-- 因为在app-leaf 的标签里面配置了router-like ， 其实是放在一个页面，所以在当前页面使用 router-view 出口 -->
                    <router-view>
                      <h1 slot="dashboard"" class="page-header">{{title}}</h1>
                    </router-view>
                </keep-alive>
        </div>
    </div>
</div>`;

    window.App = {
        template,
        components: {
            AppNavbar,
            AppLeaf,
            AppHome
        },
        data() {
            return {title: '仪表盘'}
        }

    }

})();
